<template>
	<view>
		<nav-custom :name="title"></nav-custom>
		<view class="list">
			<view class="back bor_bot">
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">车牌号</view>
					<view class="list_bo">
						<u--input placeholder="请填写车辆车牌号" fontSize="14" border="none" v-model="value"
							></u--input>
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">车架号</view>
					<view class="list_bo">
						<u--input placeholder="请填写车辆车架号" fontSize="14" border="none" v-model="value1"
							></u--input>
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">使用年限</view>
					<view class="list_bo dis_f_r_c">
						<view class="black_f_28" @click="fl_show=true">
							{{fl_name}}
						</view>
						<image class="r_img" :src="url+'/image/right.png'" mode=""></image>
					</view>
				</view>
				<view class="dis_f_sb_c">
					<view class="black_s_28">车辆品牌</view>
					<view class="list_bo dis_f_r_c">
						<view class="black_f_28" @click="brand_show=true">
							{{brand_name}}
						</view>
						<image class="r_img" :src="url+'/image/right.png'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="back dis_f_sb_t bor_bot">
				<view class="black_s_28">商品图片</view>
				<view class="list_b">
					<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							:maxCount="1"
						></u-upload>
					
					
					
					<!-- <view class=" black_s_28" v-if="is_show" @click="chooseImg">
						<image class="image" src="../../static/image/add.png" mode=""></image>
					</view>
					<view class="b_add_img" v-if="!is_show">
						<view class="shanchu" @click="delet()">
							<image class="delet" src="../../static/image/shanchu.png" mode=""></image>
						</view>
					</view>
					<view class="grey_f_20">建议上传尺寸为1:1的图片</view> -->
				</view>
			</view>
			<view class="back bor_bot">
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">日租价格</view>
					<view class="list_bo dis_f_r_c">
						<u--input placeholder="请填写日租价格" fontSize="14" border="none" v-model="value4"
							></u--input>
							<view class="black_s_28">
								元
							</view>
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">月租价格</view>
					<view class="list_bo dis_f_r_c">
						<u--input placeholder="请填写月租价格" fontSize="14" border="none" v-model="value5"
							></u--input>
							<view class="black_s_28">
								元
							</view>
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">租车押金</view>
					<view class="list_bo dis_f_r_c">
						<u--input placeholder="请填写租车押金" fontSize="14" border="none" v-model="value6"
							></u--input>
							<view class="black_s_28">
								元
							</view>
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">商品库存</view>
					<view class="list_bo">
						<u--input placeholder="请填写商品库存" fontSize="14" border="none" v-model="value7"
							></u--input>
					</view>
				</view>
				<view class="dis_f_sb_c">
					<view class="black_s_28">商品状态</view>
					<view class="list_bo dis_f_r_c" @click="zt_show = true">
						<view class="black_f_28">
							{{zt_name}}
						</view>
						<image class="r_img" :src="url+'/image/right.png'" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bule_back_but white_f_32" style="margin-left: 32rpx;" @click="submit">
			保存
		</view>
		<!-- <image class="bo_js_er_img" src="../../static/image/zcxian.png" mode=""></image> -->
		<view>
			<u-picker :show="fl_show" @confirm="confirm" @cancel="cancel" :columns="columns" keyName="title"></u-picker>
		</view>
		<view>
			<u-picker :show="brand_show" @confirm="brand_confirm" @cancel="brand_cancel" :columns="brand_columns" keyName="title"></u-picker>
		</view>
		<view>
			<u-picker :show="zt_show" @confirm="zt_confirm" @cancel="zt_cancel" :columns="zt_columns" keyName="name"></u-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "添加商品",
				value: '',
				value1: '',
				value2: '',
				value3: '',
				value4: '',
				value5: '',
				value6: '',
				value7: '',
				value8: '',
				is_show: true,
				Urlimg: '',
				is_submit:0,
				fileList1:[],
				zt_name:'请选择状态',
				is_on_sale:-1,
				zt_show: false,
				zt_columns: [
					[
						{
							value:1,
							name:'上架',
						},
						{
							value:0,
							name:'下架',
						},
					]
				],
				fl_id:0,
				fl_show: false,
				columns: [],
				fl_name:'请选择年限',
				brand_id:0,
				brand_show: false,
				brand_columns: [],
				brand_name:'请选择品牌',
				url:''
				
			}
		},
		onLoad(e) {
			this.url=this.$.ajax_url3
			if(e.id){
				this.id = e.id
				this.get_info()
			}
			this.get_years()
			this.get_brand()
		},
		methods: {
			submit(){
				if(this.value == ''){
					return this.$.ti_shi('请填写车牌号')
				}
				if(this.value1 == ''){
					return this.$.ti_shi('请填写车架号')
				}
				if(this.fl_id == 0){
					return this.$.ti_shi('请选择年限')
				}
				if(this.brand_id == 0){
					return this.$.ti_shi('请选择品牌')
				}
				if(this.fileList1.length == 0){
					return this.$.ti_shi('请上传商品图片')
				}
				if(this.value4 == ''){
					return this.$.ti_shi('请填写日租价格')
				}
				if(this.value5 == ''){
					return this.$.ti_shi('请填写月租价格')
				}
				if(this.value6 == ''){
					return this.$.ti_shi('请填写租车押金')
				}
				if(this.value7 == ''){
					return this.$.ti_shi('请填写商品库存')
				}
				if(this.is_on_sale == -1){
					return this.$.ti_shi('请选择商品状态')
				}
				var p = {
					id:this.id,
					license_plate_number:this.value,
					frame_number:this.value1,
					years_id:this.fl_id,
					brand_id:this.brand_id,
					goods_image:this.fileList1[0].url,
					is_on_sale:this.is_on_sale,
					day_money:this.value4,
					moth_money:this.value5,
					deposit:this.value6,
					stock:this.value7,
				}
				if(this.is_submit == 0){
					this.is_submit = 1;
					let url = 'store/product/add_zc';
					if(this.id){
						url = 'store/product/edit_zc';
					}
					this.$.ajax(1,'post',url,p,(res)=>{
						this.$.ti_shi(res.msg)
						if(res.code == 200){
							setTimeout(()=>{
								this.$.back()
							},600)
						}else{
							this.is_submit = 0;
						}
					});
				}
			},
			get_years(){
				this.$.ajax(1,'post','store/product/years',{},(res)=>{
					if(res.code == 200){
						this.columns = [res.data]
					}else{
						this.$.ti_shi(res.msg)
					}
				});
			},
			get_brand(){
				this.$.ajax(1,'post','store/product/brand',{},(res)=>{
					if(res.code == 200){
						this.brand_columns = [res.data]
					}else{
						this.$.ti_shi(res.msg)
					}
				});
			},
			
			get_info(){
				this.$.ajax(1,'post','store/product/edit_zc_hx',{
					id:this.id,
				},(res)=>{
					if(res.code == 200){
						this.info = res.data
						this.value = res.data.license_plate_number
						this.value1 = res.data.frame_number
						this.value4 = res.data.day_money
						this.value5 = res.data.moth_money
						this.value6 = res.data.deposit
						this.value7 = res.data.stock
						this.zt_name = res.data.is_on_sale == 1 ? '上架' : '下架';
						this.is_on_sale = res.data.is_on_sale;
						this.fileList1.push({
							url:res.data.goods_image
						})
						this.fl_id = res.data.years_id;
						this.fl_name = res.data.years_text;
						this.brand_id = res.data.brand_id;
						this.brand_name = res.data.brand_text;
					}else{
						this.$.ti_shi(res.msg)
					}
				});
			},
			
			cancel(){
				this.fl_show = false
			},
			confirm(n){
				this.fl_name = n.value[0].title
				this.fl_id = n.value[0].id
				this.fl_show = false
			},
			
			
			brand_cancel(){
				this.brand_show = false
			},
			brand_confirm(n){
				this.brand_name = n.value[0].title
				this.brand_id = n.value[0].id
				this.brand_show = false
			},
			zt_cancel(){
				this.fl_show = false
			},
			zt_confirm(n){
				this.zt_name = n.value[0].name
				this.is_on_sale = n.value[0].value
				this.zt_show = false
			},
			
			
			
			
			
			
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$.ajax_url+"/common/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							setTimeout(() => {
								resolve(data.data.url)
							}, 1000)
						}
					});
				})
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res)
						this.Urlimg = res.tempFilePaths
						this.is_show = false
					}
				})
			},
			delet() {
				this.Urlimg = ''
				this.is_show = true
			},
			checkboxChange(n) {
				console.log('change', n);
			}
		}
	}
</script>

<style>
	.back {
		padding: 32rpx 24rpx;
	}

	.list {
		margin-top: 200rpx;
		padding: 0 32rpx;
	}

	.list_bo {
		width: 478rpx;
		border-bottom: 2rpx solid #F7FAFF;
		padding-bottom: 10rpx;
		margin-top: 14rpx;
	}

	.bor_bot {
		margin-bottom: 40rpx;
	}

	.r_img {
		width: 32rpx;
		height: 32rpx;
	}

	.list_b {
		/* margin-left: 48rpx; */
		width: 478rpx;
	}

	.b_add {
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
		border: 2rpx solid #999CA3;
		text-align: center;
		line-height: 140rpx;
		margin-bottom: 16rpx;
	}

	.b_add_img {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		margin-bottom: 16rpx;
	}

	.shanchu {

		position: absolute;
		top: -16rpx;
		right: -16rpx;
	}

	.b_img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
		/* margin-bottom: 16rpx; */
	}

	.delet {
		width: 32rpx;
		height: 32rpx;
	}
	.image{
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
	}
</style>